<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
	<title>WiFi Settings</title>
	<script>
		var d = document;
		var loc = false, locip, locproto = "http:";
		var scanLoops = 0, preScanSSID = "";

		function gId(e) { return d.getElementById(e); }
		function cE(e) { return d.createElement(e); }
		function H(){window.open("https://kno.wled.ge/features/settings/#wifi-settings");}
		function B(){window.open(getURL("/settings"),"_self");}
		function N() {
			const button = gId("scan");
			button.disabled = true;
			button.textContent = "Scanning...";

			fetch(getURL("/json/net")).then((response) => {
				return response.json();
			}).then((json) => {
				// Get the list of networks only, defaulting to an empty array.
				return Object.assign(
					{},
					{"networks": []},
					json,
				).networks.sort(
					// Sort by signal strength, descending.
					(a, b) => b.rssi - a.rssi
				).reduce(
					// Filter out duplicate SSIDs. Since it is sorted by signal
					// strength, the strongest signal will be kept in the
					// order it as originally appeared in the array.
					(unique, other) => {
						if(!unique.some(obj => obj.ssid === other.ssid)) {
							unique.push(other);
						}
						return unique;
					},
					[],
				);
			}).then((networks) => {
				// If there are no networks, fetch it again in a second.
				// but only do this a few times.
				if (networks.length === 0 && scanLoops < 10) {
					scanLoops++;
					setTimeout(N, 1000);
					return;
				}
				scanLoops = 0;

				let cs = gId("CS");
				if (cs) {
					let select = cE("select");
					select.setAttribute("id", "CS");
					select.setAttribute("name", "CS");
					select.setAttribute("onchange", "T()");
					preScanSSID = cs.value;

					for (let i = 0; i < select.children.length; i++) {
						select.removeChild(select.children[i]);
					}

					for (let i = 0; i < networks.length; i++) {
						const option = cE("option");

						option.setAttribute("value", networks[i].ssid);
						option.textContent = `${networks[i].ssid} (${networks[i].rssi} dBm)`;

						if (networks[i].ssid === cs.value) {
							option.setAttribute("selected", "selected");
						}

						select.appendChild(option);
					}
					const option = cE("option");

					option.setAttribute("value", "!Cs");
					option.textContent = `Other network...`;
					select.appendChild(option);

					cs.replaceWith(select);
				}

				button.disabled = false;
				button.textContent = "Scan";
			});
		}
		// replace WiFi select with custom SSID input field again
		function T() {
			let cs = gId("CS");
			if (!cs || cs.value != "!Cs") return;
			let input = cE("input");
			input.type = "text";
			input.id = "CS";
			input.name ="CS";
			input.setAttribute("maxlength",32);
			input.value = preScanSSID;
			cs.replaceWith(input);
		}
		// https://www.educative.io/edpresso/how-to-dynamically-load-a-js-file-in-javascript
		function loadJS(FILE_URL, async = true) {
			let scE = cE("script");
			scE.setAttribute("src", FILE_URL);
			scE.setAttribute("type", "text/javascript");
			scE.setAttribute("async", async);
			d.body.appendChild(scE);
			// success event
			scE.addEventListener("load", () => {
				//console.log("File loaded");
				GetV();
			});
			// error event
			scE.addEventListener("error", (ev) => {
				console.log("Error on loading file", ev);
				alert("Loading of configuration script failed.\nIncomplete page data!");
			});
		}
		function S() {
			let l = window.location;
			if (l.protocol == "file:") {
				loc = true;
				locip = localStorage.getItem('locIp');
				if (!locip) {
					locip = prompt("File Mode. Please enter WLED IP!");
					localStorage.setItem('locIp', locip);
				}
			} else {
				// detect reverse proxy
				let path = l.pathname;
				let paths = path.slice(1,path.endsWith('/')?-1:undefined).split("/");
				if (paths.length > 2) {
					locproto = l.protocol;
					loc = true;
					locip = l.hostname + (l.port ? ":" + l.port : "") + "/" + paths[0];
				}
			}
			loadJS(getURL('/settings/s.js?p=1'), false);	// If we set async false, file is loaded and executed, then next statement is processed
			if (loc) d.Sf.action = getURL('/settings/wifi');
		}
		function getURL(path) {
			return (loc ? locproto + "//" + locip : "") + path;
		}
	</script>
	<style>@import url("style.css");</style>
</head>
<body onload="S()">
	<form id="form_s" name="Sf" method="post">
		<div class="toprow">
		<div class="helpB"><button type="button" onclick="H()">?</button></div>
		<button type="button" onclick="B()">Back</button><button type="submit">Save & Connect</button><hr>
		</div>
		<h2>WiFi 设置</h2>
		<h3>连接到存在的网络</h3>
		<button type="button" id="scan" onclick="N()">Scan</button><br>
		网络名(SSID, 为空不连接):<br>
		<input type="text" id="CS" name="CS" maxlength="32"><br>
		网络密码: <br> <input type="password" name="CP" maxlength="63"><br>
		静态 IP (DHCP则保留0.0.0.0):<br>
		<input name="I0" type="number" class="s" min="0" max="255" required> .
		<input name="I1" type="number" class="s" min="0" max="255" required> .
		<input name="I2" type="number" class="s" min="0" max="255" required> .
		<input name="I3" type="number" class="s" min="0" max="255" required><br>
		静态网关:<br>
		<input name="G0" type="number" class="s" min="0" max="255" required> .
		<input name="G1" type="number" class="s" min="0" max="255" required> .
		<input name="G2" type="number" class="s" min="0" max="255" required> .
		<input name="G3" type="number" class="s" min="0" max="255" required><br>
		子网掩码:<br>
		<input name="S0" type="number" class="s" min="0" max="255" required> .
		<input name="S1" type="number" class="s" min="0" max="255" required> .
		<input name="S2" type="number" class="s" min="0" max="255" required> .
		<input name="S3" type="number" class="s" min="0" max="255" required><br>
		mDNS address (为空则没有mDNS):<br>
		http:// <input type="text" name="CM" maxlength="32"> .local<br>
		客户端 IP: <span class="sip"> Not connected </span> <br>
		<h3>配置访问点</h3>
		AP SSID (为空则不启用AP):<br> <input type="text" name="AS" maxlength="32"><br>
		隐藏AP名: <input type="checkbox" name="AH"><br>
		AP密码 (为空则不用密码):<br> <input type="password" name="AP" maxlength="63" pattern="(.{8,63})|()" title="Empty or min. 8 characters"><br>
		WiFi AP 通道: <input name="AC" type="number" class="xs" min="1" max="13" required><br>
		AP 开放:
		<select name="AB">
		<option value="0">启动后没有连接</option>
		<option value="1">没有连接</option>
		<option value="2">一直</option>
		<option value="3">从不 (不建议)</option></select><br>
		AP IP: <span class="sip"> 未活动 </span><br>
		<h3>Experimental</h3>
		强制802.11g 模式(仅ESP8266): <input type="checkbox" name="FG"><br>
		禁止WiFi休眠: <input type="checkbox" name="WS"><br>
		<i>可以帮助解决连接问题<br>
		如果WiFi工作正常，请不要启用，这会增加功耗.</i>

		<div id="remd">
			<h3>无线遥控器</h3>
			<i>通过ESP-NOW收听活动<br>
			如果不使用遥控器，请保持禁用状态，这会增加功耗.<br></i>
		
			启用遥控: <input type="checkbox" name="RE"><br>
			硬件MAC: <input type="text" name="RMAC"><br>
			最后状态: <span class="rlid">无</span> <br>
		</div>

		<div id="ethd">
			<h3>网络类型</h3>
			<select name="ETH">
				<option value="0">无</option>
				<option value="9">ABC! WLED V43 & compatible</option>
				<option value="2">ESP32-POE</option>
				<option value="6">ESP32Deux</option>
				<option value="7">KIT-VE</option>
				<option value="8">QuinLED-Dig-Octa & T-ETH-POE</option>
				<option value="4">QuinLED-ESP32</option>
				<option value="10">Serg74-ETH32</option>
				<option value="5">TwilightLord-ESP32</option>
				<option value="3">WESP32</option>
				<option value="1">WT32-ETH01</option>
			</select><br><br>
		</div>
		<hr>
		<button type="button" onclick="B()">返回</button><button type="submit">保存并连接</button>
	</form>
</body>
</html>
